<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快手营养早餐推荐</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- 登录页面 -->
    <div id="loginPage" class="page active">
        <div class="container">
            <header>
                <h1>🍳 快手营养早餐</h1>
                <p>智能定制您的健康早餐</p>
            </header>
            
            <div class="login-card">
                <h2>微信登录</h2>
                <p>首次使用将引导您设置个性化偏好</p>
                <button id="loginBtn" class="wechat-login-btn">
                    📱 微信一键登录
                </button>
            </div>
        </div>
    </div>

    <!-- 过敏源设置页面 -->
    <div id="allergenPage" class="page">
        <div class="container">
            <header>
                <h1>⚠️ 过敏源设置</h1>
                <p>请选择您需要避免的食物过敏源</p>
            </header>
            
            <form id="allergenForm" class="form-card">
                <div class="checkbox-group">
                    <label><input type="checkbox" name="allergen" value="牛奶"> 牛奶</label>
                    <label><input type="checkbox" name="allergen" value="鸡蛋"> 鸡蛋</label>
                    <label><input type="checkbox" name="allergen" value="花生"> 花生</label>
                    <label><input type="checkbox" name="allergen" value="坚果"> 坚果</label>
                    <label><input type="checkbox" name="allergen" value="海鲜"> 海鲜</label>
                    <label><input type="checkbox" name="allergen" value="大豆"> 大豆</label>
                    <label><input type="checkbox" name="allergen" value="麸质"> 麸质</label>
                    <label><input type="checkbox" name="allergen" value="其他"> 其他</label>
                </div>
                <div class="form-buttons">
                    <button type="submit" class="submit-btn">下一步</button>
                    <button type="button" class="skip-btn" onclick="app.skipAllergens()">跳过</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 用户设置页面 -->
    <div id="settingsPage" class="page">
        <div class="container">
            <header>
                <h1>👤 个性化设置</h1>
                <p>帮助我们为您提供更精准的推荐</p>
            </header>
            
            <form id="settingsForm" class="form-card">
                <div class="form-group">
                    <label>年龄:</label>
                    <input type="number" name="age" min="1" max="120" required>
                </div>
                
                <div class="form-group">
                    <label>性别:</label>
                    <select name="gender" required>
                        <option value="">请选择</option>
                        <option value="male">男性</option>
                        <option value="female">女性</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label>饮食偏好:</label>
                    <div class="checkbox-group">
                        <label><input type="checkbox" name="dietaryPreference" value="素食"> 素食</label>
                        <label><input type="checkbox" name="dietaryPreference" value="低脂"> 低脂</label>
                        <label><input type="checkbox" name="dietaryPreference" value="高蛋白"> 高蛋白</label>
                        <label><input type="checkbox" name="dietaryPreference" value="低碳水"> 低碳水</label>
                    </div>
                </div>
                
                <div class="form-group">
                    <label>健康目标:</label>
                    <div class="checkbox-group">
                        <label><input type="checkbox" name="healthGoal" value="减肥"> 减肥</label>
                        <label><input type="checkbox" name="healthGoal" value="增肌"> 增肌</label>
                        <label><input type="checkbox" name="healthGoal" value="控糖"> 控糖</label>
                        <label><input type="checkbox" name="healthGoal" value="养生"> 养生</label>
                    </div>
                </div>
                
                <div class="form-buttons">
                    <button type="submit" class="submit-btn">开始使用</button>
                    <button type="button" class="skip-btn" onclick="app.skipSettings()">跳过</button>
                </div>
            </form>
        </div>
    </div>

    <!-- 主内容页面 -->
    <div id="mainContent" class="page">
        <div class="container">
            <header>
                <h1>🍳 快手营养早餐</h1>
                <p>为您定制的健康早餐方案</p>
            </header>

            <!-- AI菜单生成区域 -->
            <div class="ai-generator">
                <h3>🤖 AI智能定制</h3>
                <div class="ai-controls">
                    <select id="menuTime">
                        <option value="5">5分钟</option>
                        <option value="10">10分钟</option>
                        <option value="15">15分钟</option>
                    </select>
                    <select id="menuType">
                        <option value="早餐">早餐</option>
                        <option value="早午餐">早午餐</option>
                    </select>
                    <button id="generateMenuBtn">生成菜单</button>
                </div>
                <div id="aiMenuContainer" class="ai-menu-container"></div>
            </div>

            <div class="filter-section">
                <select id="timeFilter">
                    <option value="all">全部时间</option>
                    <option value="5">5分钟内</option>
                    <option value="10">10分钟内</option>
                    <option value="15">15分钟内</option>
                </select>
                
                <select id="categoryFilter">
                    <option value="all">全部类别</option>
                    <option value="中式">中式早餐</option>
                    <option value="西式">西式早餐</option>
                    <option value="饮品">健康饮品</option>
                </select>
            </div>

            <div class="search-section">
                <input type="text" id="searchInput" placeholder="搜索早餐食谱...">
                <button onclick="searchRecipes()">搜索</button>
            </div>

            <div class="recipes-container" id="recipesContainer">
                <!-- 食谱卡片将通过JavaScript动态生成 -->
            </div>

            <div class="nutrition-tips">
                <h3>食材营养知识</h3>
                <p id="nutritionTip">加载中...</p>
            </div>
        </div>
    </div>

    <script src="app.js"></script>
</body>
</html>
